{% extends "base.html" %}

{% block title %}{{ circle.name }} - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <!-- 圈子信息 -->
            <div class="card ink-card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h2 class="card-title mb-3">{{ circle.name }}</h2>
                            <p class="card-text text-muted mb-3">{{ circle.description }}</p>
                            <div class="d-flex align-items-center">
                                <small class="text-muted me-3">
                                    <i class="fas fa-users"></i> {{ circle.members|length }} 成员
                                </small>
                                <small class="text-muted">
                                    <i class="fas fa-file-alt"></i> {{ circle.posts.count() }} 帖子
                                </small>
                            </div>
                        </div>
                        <div>
                            {% if current_user in circle.members %}
                            {% if current_user.id == circle.teacher_id or current_user.is_admin %}
                            <a href="{{ url_for('invite_to_circle', circle_id=circle.id) }}" class="btn btn-success me-2">
                                <i class="fas fa-user-plus"></i> 邀请学生
                            </a>
                            {% endif %}
                            <a href="{{ url_for('leave_circle', circle_id=circle.id) }}" class="btn btn-outline-danger">
                                <i class="fas fa-sign-out-alt"></i> 退出圈子
                            </a>
                            {% else %}
                            <a href="{{ url_for('join_circle', circle_id=circle.id) }}" class="btn btn-primary ink-btn">
                                <i class="fas fa-sign-in-alt"></i> 加入圈子
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发帖按钮 -->
            {% if current_user in circle.members %}
            <div class="mb-4">
                <button type="button" class="btn btn-primary ink-btn" data-bs-toggle="modal" data-bs-target="#createPostModal">
                    <i class="fas fa-pen"></i> 发布新帖
                </button>
            </div>
            {% endif %}

            <!-- 帖子列表 -->
            {% for post in posts %}
            <div class="card ink-card mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        {% if post.author.avatar and post.author.avatar != 'default.png' %}
                        <img src="{{ url_for('static', filename='avatars/' + post.author.avatar) }}" 
                             class="user-avatar me-3" alt="{{ post.author.username }}">
                        {% else %}
                        <div class="default-avatar me-3">
                            {{ post.author.username[0] }}
                        </div>
                        {% endif %}
                        <div>
                            <h5 class="card-title mb-1">
                                <a href="{{ url_for('view_post', post_id=post.id) }}" class="text-decoration-none">
                                    {{ post.title }}
                                </a>
                            </h5>
                            <small class="text-muted">
                                <i class="fas fa-user"></i> {{ post.author.username }} · 
                                <i class="fas fa-clock"></i> {{ post.created_at.strftime('%Y-%m-%d %H:%M') }}
                            </small>
                        </div>
                    </div>
                    <p class="card-text">{{ post.content[:200] }}...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <a href="{{ url_for('view_post', post_id=post.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> 阅读全文
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-secondary comment-toggle-btn" data-post-id="{{ post.id }}">
                                <i class="far fa-comment"></i> {{ post.comments.count() }} 评论
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% if not posts %}
            <div class="text-center mt-5">
                <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                <h3>暂无帖子</h3>
                <p class="text-muted">来发布第一个帖子吧！</p>
                {% if current_user in circle.members %}
                <button type="button" class="btn btn-primary ink-btn" data-bs-toggle="modal" data-bs-target="#createPostModal">
                    <i class="fas fa-pen"></i> 发布新帖
                </button>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <div class="col-md-4">
            <!-- 圈子成员 -->
            <div class="card ink-card mb-4">
                <div class="card-header ink-header">
                    <h5 class="mb-0">圈子成员</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% for member in circle.members %}
                    <div class="list-group-item">
                        <div class="d-flex align-items-center">
                            {% if member.avatar and member.avatar != 'default.png' %}
                            <img src="{{ url_for('static', filename='avatars/' + member.avatar) }}" 
                                 class="user-avatar me-3" alt="{{ member.username }}">
                            {% else %}
                            <div class="default-avatar me-3">
                                {{ member.username[0] }}
                            </div>
                            {% endif %}
                            <div>
                                <h6 class="mb-1">{{ member.username }}</h6>
                                <small class="text-muted">
                                    {% if member == circle.creator %}
                                    <i class="fas fa-crown text-warning"></i> 创建者
                                    {% else %}
                                    <i class="fas fa-user"></i> 成员
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 发帖模态框 -->
{% if current_user in circle.members %}
<div class="modal fade" id="createPostModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ink-header">
                <h5 class="modal-title">发布新帖</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ url_for('create_post') }}" method="POST">
                <input type="hidden" name="circle_id" value="{{ circle.id }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="title" class="form-label">标题</label>
                        <input type="text" class="form-control ink-input" id="title" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="content" class="form-label">内容</label>
                        <textarea class="form-control ink-input" id="content" name="content" rows="5" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary ink-btn">发布</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 为所有评论按钮添加点击事件监听器
    document.querySelectorAll('.comment-toggle-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const postId = this.getAttribute('data-post-id');
            toggleComments(postId);
        });
    });
});

function toggleComments(postId) {
    // 实现评论展开/收起功能
    console.log('Toggle comments for post:', postId);
}
</script>
{% endblock %}
{% endblock %} 